<template>
  <div class="login-box">
    <div class="headline">
      <img src="@/assets/login/log.png">
    </div>
    <div class="login">

      <div class="echart" id="main" :style="{ float: 'left', width: '100%', height: '400px' }"></div>



    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "Login",
  data() {
    return {
      name: "张雪",
      xData: ["2020-02", "2020-03", "2020-04", "2020-05"], //横坐标数据
      yData: [30, 132, 80, 134] //纵坐标数据，与横坐标对应
    };
  },
  watch: {

  },
  mounted() {
    this.initEcharts2();
  },
  created() {


  },
  methods: {
    initEcharts2() {
      var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

// prettier-ignore
const hours = [
'5000','5100','5200', '5300', '5400', '5500', '5600', '5700', '5800','5900',
            '6000','6100','6200', '6300', '6400', '6500', '6600', '6700', '6800','6900',
];
// prettier-ignore
const days = [
    'Saturday', 
];
// prettier-ignore
const data = [[0, 0, 0],[0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]]
    .map(function (item) {
    return [item[1], item[0], item[2] || '-'];
});
option = {
  tooltip: {
    position: 'top'
  },
  grid: {
    height: '50%',
    top: '10%'
  },
  xAxis: {
    type: 'category',
    data: hours,
    splitArea: {
      show: true
    }
  },
  yAxis: {
    type: 'category',
    data: days,
    splitArea: {
      show: true
    }
  },
  visualMap: {
    min: 0,
    max: 10,
    calculable: true,
    orient: 'horizontal',
    left: 'center',
    bottom: '15%'
  },
  series: [
    {
      name: 'Punch Card',
      type: 'heatmap',
      data: data,
      label: {
        show: true
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

option && myChart.setOption(option);

    },


  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.login-box {

  height: calc(100%);
  background-size: cover;
}

.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100% - 80px);
  width: 100%;
  // background-image: url("../assets/login/background.png");
  background-size: cover;
}

.headline {
  height: 80px;

  img {
    height: 80px;
  }
}

.headimg {
  margin-top: 100px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    height: 88px;
    text-align: center;
  }
}

.title {
  margin: 5px auto 30px auto;
  font-size: 30px;
  text-align: center;
  color: #FFFFFF;
}

.login-form {
  border-radius: 6px;
  width: 700px;
  height: 100%;
  padding: 25px 25px 5px 25px;
  background: rgba(0, 41, 73, 0.898);

  .el-input {
    height: 38px;

    input {
      height: 38px;
    }
  }

  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}

.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.login-code {
  width: 33%;
  height: 38px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle;
  }
}

.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}

.login-code-img {
  height: 38px;
}


.body {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .body-button {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    margin-top: 40px;


    .login-t {
      cursor: pointer;
      color: #AAAAAA;
      /* color: #2CA6E0; */
      margin: 0 auto;
      border-bottom: solid #fff 1px;
      text-align: center;
      padding-bottom: 5px;
    }

    .login-blue {
      color: #2CA6E0;
      font-weight: 700;
      border-bottom: solid #2CA6E0 3px;
    }

    .login-1 {
      width: 140px;
    }

    .login-2 {
      width: 160px;
    }

    .login-3 {
      width: 80px;
    }

  }

  .body-login {
    width: 380px;
  }
}
</style>
